<script setup>

import {onMounted} from "vue";
import SettingHeader from "@/components/SettingHeader.vue";

const title = '搜索';
onMounted(() => {

})
</script>

<template>
  <SettingHeader :title />
  <div class = "SearchBox border mt-2 p-2">
    <input type = "text" class = "p-1" placeholder = "搜索游戏">
    <svg t = "1739340034946" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
         xmlns = "http://www.w3.org/2000/svg" p-id = "4229" width = "32" height = "32">
      <path
          d = "M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0"
          p-id = "4230"></path>
    </svg>
  </div>
  <div class = "history p-2 border">
    <div class = "mb-2">搜索历史:</div>
    <span class = "key border">AAA</span>
  </div>
</template>

<style scoped>
.SearchBox {
  height: 50px;
  position: relative;
}

.SearchBox input {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  transition: border-bottom 0.6s ease;
}

svg {
  position: absolute;
  left: 90%;
}

.SearchBox input:focus {
  border-bottom: 1px solid black;
}

.history {
  flex-wrap: wrap;
  max-width: 100%;
}

.key {
  padding: 2px 8px 2px 8px;
  margin-right: 8px;
  border-radius: 4px;
  background-color: rgba(128, 128, 128, 0.2);
}
</style>